<template>
  <div class="container" v-if="ip">
    <div v-if="showTips" class="overlay" @click="showTips = false"></div>
    <div class="left">
      <div class="link" @click="handleNavigation">
        <div class="logo">
          <el-icon><MostlyCloudy /></el-icon>
        </div>
        <div class="title">新中地天气</div>
      </div>
      <div class="area">{{ ip.city }}</div>
      <div class="weather">实时天气: {{ ip.temperature }}℃</div>
      <div class="wind">{{ ip.winddirection }}风{{ ip.windpower }}级</div>
    </div>
    <div class="right">
      <el-icon class="icon" @click="showTips = !showTips"><InfoFilled /></el-icon>
      <el-icon class="icon" @click="handleAdd" v-if="isstored"><Plus /></el-icon>
    </div>
    <div :class="['tips', { visible: showTips }]">
      <div>关于:</div>
      <div class="mar-b">这个应用可以用来追踪你选择城市的当前天气</div>
      <div>如何使用:</div>
      <div>
        1.点击搜索框输入你希望追踪的城市,
        <br />
        可以追踪到村级,但只能显示相应的区县级的天气信息,哈哈!
      </div>
      <div>2.在搜索结果中选中一个城市，你将获取当地最新的天气</div>
      <div class="mar-b">3.点击右侧的＋号可以将追踪城市的天气情况保存在首页</div>
      <div>移除城市:</div>
      <div class="mar-b">如果你不想在首页关注某个城市,可以通过底部的按钮删除它</div>
      <div>
        <button @click="showTips = !showTips">关闭</button>
      </div>
    </div>
  </div>
  <div v-else class="container">正在加载数据...</div>
</template>

<script setup>
import { MostlyCloudy, InfoFilled, Plus } from '@element-plus/icons-vue'
import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { getWeatherByIp, getCurrentWeather } from '@/api/index.js'
import { useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()


const showTips = ref(false)

// 在挂载时 判断本地存储中是否有该城市,
const isstored = ref(false)
const judge = () => {
  const cityList = JSON.parse(localStorage.getItem('cityList')) || []
  const storedCity = cityList.find((city) => city.adcode === route.params.adcode)
  
  if (route.name === '') {
    isstored.value = false
  } else if (route.name === 'search') {
    isstored.value = !storedCity // 如果找不到城市信息，设置为 true，否则为 false
  }
}

watch(
  () => route.name,
  (newName) => {
    if (newName === 'search') {
      judge()
    }
  }
)

const ip = ref('')

onMounted(async () => {
  const { adcode } = await getWeatherByIp()
  const { lives } = await getCurrentWeather(adcode)
  ip.value = lives[0]

  judge()

})

const handleNavigation = () => {
  router.push('/')
}
// 将城市信息保存到本地
const handleAdd = async () => {
  const { lives } = await getCurrentWeather(route.params.adcode)
  const city = {
    adcode: route.params.adcode,
    name: lives[0].city,
    temperature: lives[0].temperature,
  }
  const cityList = JSON.parse(localStorage.getItem('cityList')) || []
  const cityExists = cityList.some((existedCity) => existedCity.name === city.name)
  if (cityExists) {
    alert('该城市已存在！')
    return
  }
  cityList.push(city)
  localStorage.setItem('cityList', JSON.stringify(cityList))
  isstored.value = false
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;

  height: 80px;
  background: #00668a;
  color: #fff;
  padding: 20px;
  .left {
    display: flex;
    gap: 15px;
    align-items: center;
    .link {
      display: flex;
      gap: 5px;
      cursor: pointer;
      .logo {
        font-size: 24px;
      }
      .title {
        font-size: 24px;
        font-weight: 500;
      }
    }
    .area {
      font-size: 18px;
    }
  }
  .right {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 24px;
    cursor: pointer;
    .icon {
      transition: all 1s ease-in-out;
      &:hover {
        color: #004e71;
      }
    }
  }
  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10;
    transition: all 0.3s ease-in-out;
  }
  .tips {
    position: absolute;
    top: 200px;
    left: 500px;
    padding: 15px;
    background-color: #fff;
    z-index: 20;
    div {
      color: #333;
      background: #fff;
      font-size: 14px;
    }
    // 设置提示的动画效果
    opacity: 0; /* 初始透明度为0 */
    transform: scale(0.95); /* 添加缩放效果 */
    transition: opacity 1s ease, transform 0.5s ease; /* 设置过渡效果 */
    pointer-events: none; /* 防止隐藏时仍能点击 */

    &.visible {
      opacity: 1; /* 显示时的透明度 */
      transform: scale(1); /* 恢复原始大小 */
      pointer-events: auto; /* 恢复点击 */
    }
    .mar-b {
      margin-bottom: 20px;
    }
    button {
      width: 70px;
      height: 30px;
      background-color: #00668a;
      color: #fff;
      border: none;
      cursor: pointer;
    }
  }
}
</style>
